<template>
  <div class="componentsbox">
    <!-- 搜索框区域 -->
     <div class="searchbox">
      <div class="logo" @click="$router.push('/pagesContent')">
        <img src="@/assets/images/logo.png" alt="logo">
      </div>
      <div class="search">
        <div class="inputbox">
          <el-input type="text" placeholder="商品提示词" v-model="searchText" @keyup.enter="search"></el-input>
          <el-button class="btn"  icon="el-icon-search" @click="search">搜索</el-button>
        </div>
        <div class="search-history" v-if="isHistory">
          
            <div class="history-item" v-for="(item, index) in searchHistory" :key="index" @click="dianta(item.keyword)">{{ item.keyword }}</div>
        
        </div>
      </div>
     </div>
    
  </div>
</template>

<script>
import { getHotsearch, setHotsearch } from "@/api/index"; // 导入函数
export default {
  name: "searchBox",
  props: {
    isHistory: {
      type: Boolean,
      default: true, // 是否显示搜索历史
    }
  },
 
  data() {
    return {
      searchHistory:['户外露营','户外运动','户外装备','户外用品','户外活动'],
      searchText: "", // 搜索框的文本
      isStart:false, // 是否开始搜索
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    dianta(keyword){
      this.searchText = keyword; // 设置搜索框的文本
      this.search(); // 调用搜索函数
    },
    async init() {
      // 获取搜索历史
      const res = await getHotsearch({topN:10});
      console.log(res)
      if (res&&res.length>0) {
        this.searchHistory = res; // 设置搜索历史
      } else {
        // this.$message.error('失败'); // 提示用户获取失败
      }  
    },
    async search() {
      if(this.isStart) return; // 防止重复搜索
      this.isStart = true; // 设置为正在搜索状态
      var searchText = this.searchText.trim(); // 去除前后空格
      if (searchText) {
        const res =await setHotsearch({
          keyword: searchText,
          userId:this.$store.state.user.customerId||'',
        }); // 调用函数保存搜索历史
        console.log(res)
        // 在这里发送请求，获取数据 有结果进入列表页，没结果提示用户
        this.$router.push({ path: "/goodList", query: { searchText: searchText } }); // 跳转到列表页并传递搜索文本
        this.isStart = false; // 重置搜索状态
      } else {
        this.$router.push({ path: "/goodList", query: { searchText: searchText } });
        this.isStart = false; // 重置搜索状态
      }
    }
  },
 
  
};
</script>
<style scoped lang="scss">
::v-deep .el-input__inner{
  border: none !important;
 

}
.componentsbox{
  width: 100%;
  height: 94px;
  background-image: url('~@/assets/images/searchbox_bg.png');
  background-size: cover;
  
  .searchbox{
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
  }
  .logo{
    flex: 0 0 auto;
    width: 159px;
    height: 52px;
    cursor: pointer;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .search{
    margin-left: 100px;
    width: 100%;
    .inputbox{
      width: 65%;
      height: 38px;
      border-radius: 7px 7px 7px 7px;
      border: 1px solid #0672F9;
      display: flex;
      background: #f7f8fc;
      align-items: center;
      padding: 0 0 0 16px;
      .btn{
        width: 96px;
        height: 34px;
        background: #0672F9;
        border-radius: 6px 6px 6px 6px;
        color: #fff;
        margin-right: 2px;
      }
      .btn:hover{
        opacity: 0.7;
      }
    }
    .inputbox:hover{
      border: 1px solid #0672F9;
    }
    .search-history{
      margin-top: 8px;
      width: 65%;
      overflow: hidden;
      display: flex;
      align-items: center;
      .history-item{
        margin-right: 30px;
        font-weight: 400;
        font-size: 12px;
        color: #4F4F4F;
        text-align: left;
        cursor: pointer;
        &:hover{
          color: #0672F9;
        }
      }
    }
  }
}
</style>
